<template>
    <div class="songList">
        <div class="img" @click="toMusicList">
        <img :src="url+musicList.playlist_coverUrl" alt="">    
        </div>
        <span>{{ musicList.playlist_name }}</span>
        </div>
</template>

<script>
import {url} from "@/apiUrl"//引入地址
export default {
    data:()=>{
        return {
            src:require("../../public/image/1.jpg")
        }
    },
    props:{
        musicList:{}
    },
    created(){
    this.url=`${url}/`
  },
    methods:{
        toMusicList(){
        this.$router.push({
        path:'/musicList',
        query:{
        playlist_id:this.musicList.playlist_id,//传递歌单id
        listDetails:this.musicList//传递歌单信息
        }
      }).catch((err)=>{});//导航到相应路径
        }
    }
}

</script>
<style scoped>
.songList{
    margin: 1rem;
}
    .img{
        width: 21.85rem;
        height: 21.85rem;
        padding: 1.43rem;
        margin: -1.43rem;
        cursor: pointer;     
    }
    img{
        width: 19rem;
        height: 19rem;
        border-radius:5%;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;    
    }
    p{
        font-size: 8px;
        opacity:0.7;
    }
    span{
        margin:1rem 0 0 0;
        display:block;
        width: 20rem;
        font-size: 14px;
        /* font-weight:bold; */
    }
</style>